import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { BookCard, ActivityCard } from '@/components/BookCard';
import { BottomNav } from '@/components/BottomNav';
import { useAppStore } from '@/stores/appStore';
import { mockBooks, mockActivities } from '@/data/mockData';
import { cn } from '@/utils/cn';
import { BookOpen, Calendar, Star, ChevronRight, Heart } from 'lucide-react';

export default function HomePage() {
  const navigate = useNavigate();
  const { 
    setBooks, 
    setActivities, 
    toggleFavorite,
    books, 
    activities,
    currentUser 
  } = useAppStore();

  // 初始化数据
  useEffect(() => {
    setBooks(mockBooks);
    setActivities(mockActivities);
  }, [setBooks, setActivities]);

  const featuredBooks = books.slice(0, 4);
  const featuredActivities = activities.slice(0, 3);

  const handleBookClick = (bookId: string) => {
    navigate(`/books/${bookId}`);
  };

  const handleActivityClick = (activityId: string) => {
    navigate(`/activities/${activityId}`);
  };

  const registerActivity = (activityId: string) => {
    navigate(`/activities/${activityId}`);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-warm-50 to-secondary-50">
      <BottomNav />
      
      {/* 主要内容区域 */}
      <main className={cn(
        "px-4 py-6 md:py-8",
        "pt-20 md:pt-8", // 为移动端顶部搜索栏和桌面端导航留出空间
        "pb-24 md:pb-8"  // 为底部导航栏留出空间
      )}>
        
        {/* 英雄区域 */}
        <section className="text-center mb-12">
          <div className="max-w-4xl mx-auto">
            <h1 className="text-4xl md:text-6xl font-bold text-gray-800 mb-4">
              欢迎来到
              <span className="text-primary-600">绘本岛</span>
            </h1>
            <p className="text-lg md:text-xl text-gray-600 mb-8">
              "绘本岛——让亲子时光，更温暖一点"<br/>
              每天十分钟，绘出成长的奇妙旅程
            </p>
            
            {/* 特色介绍卡片 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
              <div className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-16 h-16 bg-accent-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <BookOpen className="w-8 h-8 text-accent-600" />
                </div>
                <h3 className="text-xl font-bold text-gray-800 mb-2">海量绘本</h3>
                <p className="text-gray-600">精选优质绘本，涵盖各个年龄段和教育主题</p>
              </div>
              
              <div className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Calendar className="w-8 h-8 text-secondary-600" />
                </div>
                <h3 className="text-xl font-bold text-gray-800 mb-2">亲子活动</h3>
                <p className="text-gray-600">丰富的线下活动，增进亲子感情</p>
              </div>
              
              <div className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Heart className="w-8 h-8 text-red-500" />
                </div>
                <h3 className="text-xl font-bold text-gray-800 mb-2">成长记录</h3>
                <p className="text-gray-600">记录阅读足迹，见证孩子成长</p>
              </div>
            </div>
          </div>
        </section>

        {/* 热门绘本区域 */}
        <section className="mb-12">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl md:text-3xl font-bold text-gray-800 flex items-center">
              <Star className="w-8 h-8 text-yellow-400 mr-3" />
              热门绘本
            </h2>
            <button
              onClick={() => navigate('/books')}
              className="flex items-center text-primary-600 hover:text-primary-700 font-medium"
            >
              查看更多
              <ChevronRight className="w-5 h-5 ml-1" />
            </button>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {featuredBooks.map((book) => (
              <BookCard
                key={book.id}
                book={book}
                onFavorite={() => toggleFavorite(book.id)}
                onRead={handleBookClick}
              />
            ))}
          </div>
        </section>

        {/* 亲子活动区域 */}
        <section className="mb-12">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl md:text-3xl font-bold text-gray-800 flex items-center">
              <Calendar className="w-8 h-8 text-accent-500 mr-3" />
              精彩活动
            </h2>
            <button
              onClick={() => navigate('/activities')}
              className="flex items-center text-primary-600 hover:text-primary-700 font-medium"
            >
              查看更多
              <ChevronRight className="w-5 h-5 ml-1" />
            </button>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredActivities.map((activity) => (
              <ActivityCard
                key={activity.id}
                activity={activity}
                onFavorite={() => toggleFavorite(activity.id)}
                onRegister={registerActivity}
              />
            ))}
          </div>
        </section>

        {/* 品牌故事区域 */}
        <section className="bg-white rounded-3xl p-8 md:p-12 shadow-lg">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-6">
              关于绘本岛
            </h2>
            <p className="text-lg text-gray-600 mb-8 leading-relaxed">
              绘本岛是一个专为亲子家庭设计的阅读平台，我们致力于为孩子们提供优质的绘本内容，
              为家长们创造美好的亲子时光。在这里，每一本绘本都是一个奇妙的世界，
              每一次阅读都是一次心灵的旅行。
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <div className="bg-primary-50 px-4 py-2 rounded-full">
                <span className="text-primary-700 font-medium">精选绘本</span>
              </div>
              <div className="bg-accent-50 px-4 py-2 rounded-full">
                <span className="text-accent-700 font-medium">亲子互动</span>
              </div>
              <div className="bg-secondary-50 px-4 py-2 rounded-full">
                <span className="text-secondary-700 font-medium">成长记录</span>
              </div>
              <div className="bg-red-50 px-4 py-2 rounded-full">
                <span className="text-red-700 font-medium">温暖陪伴</span>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}